<template>
  <div>
    <el-form :rules="rules" :model="loginFrom" ref="loginFrom" class="loginContainer">
      <h3 class="loginTitle">系统登录</h3>
      <el-form-item prop="username">
        <el-input type='text' v-model="loginFrom.username" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type='text' v-model="loginFrom.password" auto-complete="off" placeholder="请输入密码" @keydown.enter.native='submitLogin'></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" class="loginRemember" style="margin:0px 0px 15px 0px;">记住密码</el-checkbox>
      <el-form-item>
        <el-button  type="primary" :loading="loading" size="medium" style="width:100%" @click="submitLogin">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      checked: true,
      loading: false,
      loginFrom: {
        username: 'admin',
        password: '123'
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ]
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    submitLogin() {
       this.$refs.loginFrom.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.postKeyValueRequest('/doLogin',this.loginFrom).then(data => {
              if(data) {
                // 保存用户的信息
                window.sessionStorage.setItem("user",JSON.stringify(data.obj));
                let redirect = this.$route.query.redirect;
                this.$router.replace((redirect == "/" || redirect == undefined) ? '/home' : redirect)
              }else {
                this.loading = false;
              }
            })
          } else {
            this.$message.error('请输入用户名或者密码');
            return false;
          }
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
  .loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 25px 35px 15px 35px  ;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .loginTitle{
    margin: 10px auto 20px auto;
    text-align: center;
  }
  .loginRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
  }
</style>